Chart for WPF/Silverlight
手順 3:軸の書式設定
製品の概要 > はじめに > クイックスタート > 手順 3:軸の書式設定

この手順では、ChartView オブジェクトを追加して、X 軸をカスタマイズできるようにします。

Visual Studio または Blend で XAML を使用して Chart for WPF/Silverlight の軸を書式設定するには、以下の作業を実行します。

  1. ChartViewオブジェクトを追加して、X 軸と Y 軸のタイトルを設定できるようにします。ChartView オブジェクトは、データが含まれるグラフの領域(軸を含む)を表します。グラフの軸の詳細については、「」を参照してください。軸のタイトルは単なるテキストではなく、UIElement オブジェクトです。この例では、TextBlock 要素を使用して、X 軸と Y 軸のタイトルにテキストを割り当てます。TextBlock 要素を追加したら、その前景色を変更して中央揃えにすることによって、テキストを書式設定できます。

    XAML
    コードのコピー
    <c1chart:C1Chart >
          <c1chart:C1Chart.View>
            <c1chart:ChartView>
              <c1chart:ChartView.AxisX>
                <c1chart:Axis>  
                  <c1chart:Axis.Title>
                    <TextBlock Text="価格" TextAlignment="Center" Foreground="Crimson"/>
                  </c1chart:Axis.Title>
                </c1chart:Axis>
              </c1chart:ChartView.AxisX>
              <c1chart:ChartView.AxisY>
                <c1chart:Axis>
                  <c1chart:Axis.Title>
                    <TextBlock Text="キッチン家電" TextAlignment="Center" Foreground="Crimson"/>
                  </c1chart:Axis.Title>
                </c1chart:Axis>
              </c1chart:ChartView.AxisY>
            </c1chart:ChartView>
          </c1chart:C1Chart.View>
     </c1chart:C1Chart>
    
  2. デフォルトの AxisX.MajorUnitの単位値を 5000 から 2000 に変更します。これで、Viewオブジェクトの XAML コードは、次のようになるはずです。

    XAML
    コードのコピー
    <c1chart:C1Chart.View>
                    <c1chart:ChartView>
                        <c1chart:ChartView.AxisX>
                            <c1chart:Axis Min="0" Max="50000" MajorUnit="2000" >
                                <c1chart:Axis.Title>
                                    <TextBlock Text="価格" TextAlignment="Center" Foreground="Crimson" />
                                </c1chart:Axis.Title>
                            </c1chart:Axis>
                        </c1chart:ChartView.AxisX>
                        <c1chart:ChartView.AxisY>
                            <c1chart:Axis>
                                <c1chart:Axis.Title>
                                    <TextBlock Text="キッチン家電" TextAlignment="Center" Foreground="Crimson" />
                                </c1chart:Axis.Title>
                            </c1chart:Axis>
                        </c1chart:ChartView.AxisY>
                    </c1chart:ChartView>
     </c1chart:C1Chart.View>
    
  3. ChartView.AxisXオブジェクトの内<c1chart:Axis></c1chart:Axis>で、AnnoFormatを設定して x 軸の数値の x 値を通貨に変更し、AnnoAngleプロパティを設定して X 軸の注釈を反時計回りに 60° 回転させます。

    <c1chart:Axis AnnoFormat="c" AnnoAngle="60" />

  4. ChartView.AxisYオブジェクトの内<c1chart:Axis></c1chart:Axis>で、ReversedプロパティをTrueに設定して、Y 軸の方向を逆転させます。次の「手順 4:グラフの外観の調整」では、XAML を使用してグラフの外観をカスタマイズする方法を学びます。

コードビハインドファイルでプログラムにより Chart for WPF/Silverlight の軸を書式設定するには、次の作業を実行します。

コンストラクタの Window1 クラスで次のコードを追加して、グラフの軸を書式設定します。

コードのコピー
' 軸のタイトルを設定
C1Chart1.View.AxisY.Title =  New TextBlock() With {.Text = "キッチン家電", .TextAlignment = TextAlignment.Center,.Foreground = System.Windows.Media.Brushes.Crimson}
C1Chart1.View.AxisX.Title =  New TextBlock() With {.Text = "価格", .TextAlignment = TextAlignment.Center,.Foreground = System.Windows.Media.Brushes.Crimson}
' 軸ラベルを反転順番に設定
c1Chart1.View.AxisY.Reversed = True
' 軸の範囲を設定
C1Chart1.View.AxisX.Min = 0
C1Chart1.View.AxisX.Max = 50000
' ラベル単位を設定
c1Chart1.View.AxisX.MajorUnit = 2000
' 金融向けの書式設定
C1Chart1.View.AxisX.AnnoFormat = "c"
' 軸の注釈の回転
C1Chart1.View.AxisX.AnnoAngle = "60"
コードのコピー
// 軸のタイトルを設定
c1Chart1.View.AxisY.Title= new TextBlock() { Text = "キッチン家電",TextAlignment=TextAlignment.Center, Foreground = System.Windows.Media.Brushes.Crimson };
c1Chart1.View.AxisX.Title = new TextBlock() { Text = "価格", TextAlignment=TextAlignment.Center, Foreground = System.Windows.Media.Brushes.Crimson };
// 軸ラベルを反転順番に設定
c1Chart1.View.AxisY.Reversed = true;
// 軸の範囲を設定
c1Chart1.View.AxisX.Min = 0;
c1Chart1.View.AxisX.Max = 50000;
// ラベル単位を設定
c1Chart1.View.AxisX.MajorUnit = 2000;
// 金融向けの書式設定
c1Chart1.View.AxisX.AnnoFormat = "c";
// 軸の注釈の回転
c1Chart1.View.AxisX.AnnoAngle=60;

次の「手順 4:グラフの外観の調整」では、プログラムでグラフの外観をカスタマイズする方法を学びます。

プログラムを実行して、以下を確認します。

軸の注釈の新しい書式がグラフに適用されます。



次の手順では、Theme プロパティのオプションの1つを使用して、グラフの外観をカスタマイズします。

関連トピック